<template>
	<view class="content">
		<nav-bars bgColor="transparent" title="套餐商品" fontColor="#000"></nav-bars>
		<view class="wrapper">
			<view class="topColumn">
				<view class="titleBox flex">
					<view class="titles">{{product_pack.name}}</view>
					<view class="shareIcon" @click="sharePoster()">
						<image :src="`${baseImg}/static/activity/share-icon.png`"></image>
					</view>
				</view>
				<view class="paramBlock flex">
					<view class="areas">
						<text>{{product_pack.area}}</text>
						<text>㎡</text>
					</view>
					<view class="number">
						<text>{{product_pack.product_num}}</text>
						<text>件商品</text>
					</view>
				</view>
			</view>
			<view class="d_banner">
				<image :src="product_pack.lead_img"></image>
			</view>
			<view class="productPrice">
				<text>精选套餐价：</text>
				<text style="color: #E86F12;">￥</text>
				<text class="t_price">{{product_pack.price}}</text>
			</view>
			<!-- 商品列表 -->
			<view class="goodsWrap flex">
				<view class="g_cCan">
					<!-- 左边nav栏 -->
					<view class="g_cNav">
						<view class="g_cnItem" :class="{'active': classifyIndex == items.cate_id}"
							v-for="items in classifyList" :key="items.cate_id" @click="toggleNav(items)">
							<text class="g_cnTxt">{{items.cate_name}}</text>
						</view>
						<view class="g_cnItem"></view>
					</view>
					<!-- 右边商品分类 -->
					<view class="g_cClass">
						<view class="g_ccList">
							<view class="g_ccGroup">
								<view class="g_ccTit">{{cate_name}}</view>
								<view class="g_ccItems" v-for="(item,index) in packGoods" :key="index">
									<view class="inshop">
										<image src="@/static/mall/store.png"></image>
										{{item.store_name}}
										<!-- <text class="iconfont icon-more"></text> -->
									</view>
									<view class="goods_card" v-for="(items,indexs) in item.medical_list" :key="indexs" 
									@click="goSkip('/pagesFour/home/pages_product/product/goodsDetails?id='+items.product_id)">
										<image class="img" lazyLoad="true" :src="items.main_imgurl"></image>
										<view class="card_right">
											<view class="title ell-2">{{items.product_title}}
											</view>
											<!-- <view class="futitle">
												<view v-for="(attr_params,index) in items.attribute"
													style="display: inline-block;">
													<text
														v-if="attr_params.attr_name">{{attr_params.attr_value}}/</text>
													<text v-if="attr_params.key">{{attr_params.value}}/</text>
												</view>
											</view> -->
											<view class="buttonBox flex">
												<view class="price">￥<text>{{items.price}}</text></view>
												<view class="titlenum">x{{items.num}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--模态弹窗-->
		<qrcode-poster ref="poster" :title="shareData.name" :subTitle="shareData.name" :headerImg="shareData.lead_img"
			:price="shareData.price"></qrcode-poster>
	</view>
</template>

<script>
	import QrcodePoster from '@/components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue';
	import service_now from '@/service/now.js'
	export default {
		components: {
			QrcodePoster
		},
		data() {
			return {
				id: '',
				thumb_url: [],
				baseImg: this.$static,
				packGoods: [], //产品包商品
				product_pack_scene: {},
				product_pack: {},
				is_show_model: false, //是否显示分享模态窗
				shareData: {}, //分享参数
				sharecode: '', //二维码
				classifyIndex: '',
				classifyList: [],
				cate_name: '',
			}
		},
		onLoad(option) {
			let pack_id = option.id;
			this.id = pack_id;
			this.productPackDateils(pack_id);
			this.packageShare(pack_id);
			this.getProductPackCate(pack_id);
		},
		methods: {
			//产品包详情
			productPackDateils(id) {
				let params = {
					pack_id: id,
				}
				service_now.productPackDateils(params).then(res => {
					if (res.code == 1) {
						let data = res.data;
						this.product_pack = data.productPack;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2500
						});
					}
				})
			},
			//获取分享参数
			packageShare(id) {
				let params = {
					pack_id: id,
				}
				service_now.productPackShare(params).then(res => {
					if (res.code == 1) {
						this.shareData = res.data.productPack;
						this.sharecode = res.data.wx_code_url;
					}
				})
			},

			//分享海报
			sharePoster() {
				//获取带参数二维码并传递
				this.$refs.poster.showCanvas(this.sharecode);
			},
			//分类列表数据
			getProductPackCate(id) {
				let params = {
					pack_id: id,
				}
				service_now.productPackCate(params).then(res => {
					if (res.code == 1) {
						let data = res.data;
						let cate_id = data[0].cate_id
						this.classifyIndex = cate_id
						this.cate_id = cate_id
						this.cate_name = data[0].cate_name
						this.getProductGoods(cate_id, data[0].pack_id)
						this.classifyList = data;
					}
				})
			},
			//商品列表
			getProductGoods(cate_id, pack_id) {
				let params = {
					pack_id: pack_id,
					cate_id: cate_id
				}
				service_now.productGoods(params).then(res => {
					if (res.code == 1) {
						let data = res.data;
						this.packGoods = data
					}
				})
			},
			// 切换nav栏
			toggleNav(items) {
				if (this.classifyIndex != items.cate_id) {
					this.classifyIndex = items.cate_id
					this.cate_name = items.cate_name
					this.getProductGoods(items.cate_id, items.pack_id);
				}
			},
			goSkip(url) {
				uni.navigateTo({
					url: url
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;

		.wrapper {
			width: 100%;
			background-color: #FFFFFF;

			.topColumn {
				width: 94%;
				margin: 10rpx auto;

				.titleBox {
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10rpx;

					.titles {
						width: 75%;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 34rpx;
						font-weight: bold;
						color: #252525;
					}

					.shareIcon {
						width: 80rpx;
						height: 80rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.paramBlock {
					width: 100%;
					height: auto;
					color: #717171;
					font-size: 24rpx;

					.areas {}

					.number {
						margin-left: 8rpx;
					}
				}
			}

			// banner=====
			.d_banner {
				width: 94%;
				margin: auto;
				height: 320rpx;
				background: #f0f0f0;
				position: relative;
				z-index: 1;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}

				.d_bItem {
					width: 100%;
					height: 100%;
					position: relative;
				}

				.d_bTag {
					height: 58rpx;
					line-height: 58rpx;
					color: #fff;
					font-size: 24rpx;
					padding: 0 24rpx;
					border-radius: 28rpx;
					background: rgba(51, 51, 51, 0.8);
					position: absolute;
					bottom: 78rpx;
					right: 36rpx;
				}

				.d_bDots {
					width: 100%;
					position: absolute;
					bottom: 66rpx;
					left: 0;
					display: flex;
					justify-content: center;
				}
			}

			.productPrice {
				width: 100%;
				padding: 16rpx 0 0 20rpx;
				color: #252525;

				text.t_price {
					color: #E86F12;
					font-size: 34rpx;
					font-weight: bold;
				}
			}

			.goodsWrap {
				width: 96%;
				margin: 60rpx auto;

				.g_cCan {
					height: 100%;
					background: #fff;
					display: flex;
					overflow: hidden;
					padding-bottom: 40rpx;
				}

				// 左边nav栏
				.g_cNav {
					width: 172rpx;
					height: 100%;
					background-color: #f6f7fb;
					overflow: auto;
					padding-bottom: 50rpx;

					.g_cnItem {
						width: 100%;
						height: 110rpx;
						line-height: 110rpx;
						text-align: center;
						background: #f6f7fb;
						position: relative;
						z-index: 2;

						&.active {
							font-weight: bold;
							color: #a98f68;
							background: #fff;
							z-index: 1;
						}
					}

					.g_cnTxt {
						position: relative;
						z-index: 2;
					}
				}

				// 右边商品分类
				.g_cClass {
					margin-left: 32rpx;
					flex: 1;
					overflow: auto;
					padding-bottom: 50rpx;

					.g_ccList {}

					.b_scroll {
						width: 100%;
						height: 100%;
					}

					.g_ccTit {
						height: 50rpx;
						line-height: 50rpx;
						font-size: 30rpx;
						font-weight: normal;
						padding-top: 20rpx;
						margin-left: 12rpx;
						background: #fff;
						box-sizing: content-box;
					}

					.g_ccItems {
						display: flex;
						flex-wrap: wrap;
						padding-right: 20rpx;
					}

					.g_ccItem {
						width: 156rpx;
						margin-left: 12rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
					}

					.g_ccImage {
						width: 156rpx;
						height: 156rpx;
					}

					.g_ccTxt {
						font-size: 24rpx;
						line-height: 44rpx;
					}

					.inshop {
						padding-left: 50rpx;
						position: relative;
						line-height: 80rpx;
						width: 100%;

						image {
							position: absolute;
							top: 20rpx;
							left: 0;
							width: 40rpx;
							height: 40rpx;
						}

						text {
							float: right;
						}

						.iconfont {
							float: right;
						}
					}

					.goods_card {
						display: flex;
						padding-top: 20rpx;
						align-items: center;
						width: 100%;
						position: relative;

						.img {
							border-radius: 8rpx;
							width: 170rpx;
							height: 170rpx;
							flex-shrink: 0;
							background-color: #f6f6f6;
						}
					}

					.card_right {
						font-size: 26rpx;
					 padding-left: 30rpx;
					 width: 100%;
						min-width: 300rpx;
						color: #807e7e;

						.title {
							width: 95%;
							font-size: 30rpx;
							display: block;
							color: #525050;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.buttonBox {
							width: 100%;
							height: 108rpx;
							justify-content: space-between;
							align-items: flex-end;
						}
					}

					.orderid {
						color: #999;
						font-size: 26rpx;
					}

					.card_bottom {
						justify-content: flex-end;
					}
				}
			}
		}

		.futitle {
			overflow: hidden;
			padding-top: 18rpx;
			font-size: 22rpx;
		}

		.titlenum {
			display: inline-block;
			float: right;
		}

		.attribute {
			overflow: auto;
			display: flex;

			.N_ibute {
				padding: 0 20rpx 20rpx;
				display: flex;
			}

			.N_name {
				width: 160rpx;
				line-height: 60rpx;
				text-align: center;
				margin-right: 20rpx;
				color: #666;
				background: #F6F7FB;
				-webkit-border-radius: 27px;
				border-radius: 50rpx;
				font-size: 25rpx;

				&:nth-last-child(1) {
					margin: 0;
				}
			}

			.N_name.active {
				background: none;
				border: 1px #E9423E solid;
				color: #E9423E;
			}
		}



		.text-ellipsis {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
</style>
